<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件模板的分离写法</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>

<!--1、script的组件模板分离写法-->
<script type="text/x-template" id="script-cpn">
  <div>
    <h2>script的组件模板分离写法</h2>
  </div>
</script>

<!--2、template的组件模板分离写法-->
<template id="template-cpn">
  <div>
    <h2>template的组件模板分离写法</h2>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {},
    components: {
      'cpn':{
        // template:'#script-cpn'
        template:'#template-cpn'
      }

    }
  });
</script>
</body>
</html>
